<!--作家专区-->
<template>
    <div>
        <div style="width: 100%;text-align: left;margin-left: 320px">
            <span style="font-size: 30px;text-align: left">作家申请</span>
        </div>
        <div class="divv">
            <h3 style="margin-left: -1100px"></h3><hr>
<!--            作家申请验证表单-->
            <div class="divfrom">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="笔名" prop="title">
                        <el-input type="title" placeholder="请输入" v-model="ruleForm.title"  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="作家管理密码" prop="pass">
                        <el-input type="password" placeholder="请输入" v-model="ruleForm.pass" show-password autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" placeholder="请输入" v-model="ruleForm.checkPass" show-password autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="email" label="电子邮箱">
                        <el-input placeholder="name@qq.com" v-model="ruleForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input placeholder="请输入手机号" v-model.number="ruleForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="verification">
                        <div class="drag" ref="dragDiv" >
                            <div class="drag_bg"></div>
                            <div class="drag_text">{{confirmWords}}</div>
                            <div ref="moveDiv" @mousedown="mousedownFn($event)" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg" style="position: absolute;top: 0px;left: 0px;"></div>
                        </div>
                    </el-form-item>
                    <br>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Writer",
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            var checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                }
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        if (!/^1[34578]\d{9}$/.test(value)) {
                            callback(new Error('手机格式不正确'));
                        } else {
                            callback();
                        }
                    }
                }, 1000);
            };
            var email_e = (rule, value, callback) => {
                if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
                    callback(new Error('邮箱格式不正确'));
                } else {
                    callback();

                }
            }
            return {
                // 滑动验证
                beginClientX: 0,           /*距离屏幕左端距离*/
                mouseMoveStata: false,     /*触发拖动状态  判断*/
                maxwidth: '',               /*拖动最大宽度，依据滑块宽度算出来的*/
                confirmWords: '拖动滑块验证',   /*滑块文字*/
                confirmSuccess: false,       /*验证成功判断*/

                ruleForm: {
                    title:'',
                    pass: '',
                    checkPass: '',
                    email: '',
                    phone: '',
                    verification:'',
                },
                rules: {
                    title:[
                        {required: true, message: '笔名不能为空', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                    ],
                    pass: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                    phone: [
                        {validator: checkPhone, trigger: 'blur'}
                    ],
                    email: [
                        {validator: email_e, trigger: 'blur'}
                    ],
                },
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$http.post("user/edit",{id:localStorage.getItem("id"),title:this.ruleForm.title,identity:1}).then(response=>{
                            if(response.status===200){
                                this.$message({
                                    showClose: true,
                                    message: '申请成功！',
                                    type: 'success',
                                });
                                window.location.href="MyWorks"
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //滑动验证
            mousedownFn:function (e) {
                if(!this.confirmSuccess){
                    e.preventDefault && e.preventDefault();   //阻止文字选中等 浏览器默认事件
                    this.mouseMoveStata = true;
                    this.beginClientX = e.clientX;
                }
            },        //mousedoen 事件
            successFunction(){
                this.confirmSuccess = true
                this.confirmWords = '验证通过';
                if(window.addEventListener){
                    document.getElementsByTagName('html')[0].removeEventListener('mousemove',this.mouseMoveFn);
                    document.getElementsByTagName('html')[0].removeEventListener('mouseup',this.moseUpFn);
                }else {
                    document.getElementsByTagName('html')[0].removeEventListener('mouseup',()=>{});
                }
                document.getElementsByClassName('drag_text')[0].style.color = '#fff'
                document.getElementsByClassName('handler')[0].style.left = this.maxwidth + 'px';
                document.getElementsByClassName('drag_bg')[0].style.width = this.maxwidth + 'px';
            },                //验证成功函数
            mouseMoveFn(e){
                if(this.mouseMoveStata){
                    let width = e.clientX - this.beginClientX;
                    if(width>0 && width<=this.maxwidth){
                        document.getElementsByClassName('handler')[0].style.left = width + 'px';
                        document.getElementsByClassName('drag_bg')[0].style.width = width + 'px';
                    }else if(width>this.maxwidth){
                        this.successFunction();
                    }
                }
            },                   //mousemove事件
            moseUpFn(e){
                this.mouseMoveStata = false;
                var width = e.clientX - this.beginClientX;
                if(width<this.maxwidth){
                    document.getElementsByClassName('handler')[0].style.left = 0 + 'px';
                    document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px';
                }
            }                     //mouseup事件
        },
        mounted(){
            this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;
            document.getElementsByTagName('html')[0].addEventListener('mousemove',this.mouseMoveFn);
            document.getElementsByTagName('html')[0].addEventListener('mouseup',this.moseUpFn)
        }

    }
</script>

<style scoped>
    .divv{
        background-color: aliceblue;
        margin: auto;
        margin-top: 20px;
        width: 1250px;
        height: 600px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }
    .divfrom {margin-top: 70px;margin-left: 370px;}

    /*滑动验证*/
    .drag{
        position: relative;
        background-color: #e8e8e8;
        width: 100%;
        height: 34px;
        line-height: 34px;
        text-align: center;
    }
    .handler{
        width: 40px;
        height: 32px;
        border: 1px solid #ccc;
        cursor: move;
    }
    .handler_bg{
        background: #fff url("") no-repeat center;
    }
    .handler_ok_bg{
        background: #fff url("") no-repeat center;
    }
    .drag_bg{
        background-color: #7ac23c;
        height: 34px;
        width: 0px;
    }
    .drag_text{
        position: absolute;
        top: 0px;
        width: 100%;text-align: center;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        -o-user-select:none;
        -ms-user-select:none;
    }
</style>
